@import './vw';

* {
  box-sizing: border-box;
}

.search-box{
  height: vw(100);
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  img{
    position: absolute;
    top: vw(34);
    left: vw(40);
    height: vw(32);
  }

    input{
      margin-right: vw(20);
      padding-left: vw(70);
      height: vw(60);
      width: 80%;
      background-color: rgba(0, 0, 0, 0);
      border: vw(2) solid #fff;
      border-radius: vw(30);
      font-size: vw(28);
      outline: none;
    }

    span{
      font-size: vw(30);
      color: #fff;
    }
  
}

.content{
  padding: vw(36) 0 0 vw(30);
  height: 91vh;
  background-color: #f1f1f1;

  .text1{
    margin-bottom: vw(20);
    font-size: vw(30);
  }

  .text2{
    display: flex;
    flex-wrap: wrap;

    .text2-1{
      margin-right: vw(10);
      margin-bottom: vw(20);
      height: vw(64);
      width: vw(172);
      border: 1px solid #dddddd;
      background-color: #fff;
      font-size: vw(30);
      line-height: vw(62);
      text-align: center;
      color: #7e7e7e;
    }

    .text2-1:nth-child(2),.text2-1:nth-child(3),.text2-1:nth-child(8),.text2-1:nth-child(9){
      width: vw(200);
    }

    .text2-1:nth-child(4){
      width: vw(134);
    }

    .text2-1:nth-child(6){
      width: vw(230);
    }

    .text2-1:active{
      background-color: red;
      color: #fff;
    }
  }
}